<template>
	<view class="col-x" :style="mainStyleGet">

	</view>
</template>

<script>
	export default {
		name: "lg-col",
		props:{
			direction:{
				type:String,
				validator: v => ['row','col'].includes(v)
			},
			span:{
				type:[String,Number],
				default:6
			},
			basis:{
				type:[String,Number],
				default:0
			},
		},
		computed:{
			mainStyleGet(){
				let styler = {}
				const {direction,span,basis } = this.$props || {}
					!!direction &&  styler["flexDirection"] = direction;
					!!span &&  styler["flex"] = span;
					!!basis && styler["flexBasis"] = basis
				return styler
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.col-x {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}
</style>
